<template>
	<view>
		<swiper :style="'height: '+height+'rpx;' " :indicator-dots="true" :autoplay="true" :interval="interval"
			:duration="duration" :circular="circular" :indicator-active-color="IndicatorActiveColor">
			<swiper-item v-for="(item,index) in list" :key="index" @click="confirm(index,item)">
				<image :style="'width: 100%;border-radius: ' + BorderRadius+'rpx;height:'+height+'rpx;'"
					:src="item.img|getImg"></image>
			</swiper-item>
		</swiper>

	</view>
</template>

<script>
	//  list =[{
	// 		name: '广告',
	// 		img: 'https://php.likeadmin.cn//resource/image/adminapi/default/banner01.png'
	// 	}]
	export default {
		name: 'b-swiper-a',
		props: {
			height: {
				type: [String, Number],
				default: 320
			},
			circular: {
				type: Boolean,
				default: true
			},
			duration: {
				type: Number,
				default: 1000
			},
			IndicatorActiveColor: {
				type: String,
				default: '#000000'
			},
			//自动切换时间间隔
			interval: {
				type: [String, Number],
				default: 3000
			},
			//圆角弧度
			BorderRadius: {
				type: [String, Number],
				default: 10
			},
			list: {
				type: Array,
				default: []
			},
		},
		data() {
			return {

			}
		},
		methods: {
			confirm(index, item) {
				this.$emit('confirm', index, item)
			}
		},

	}
</script>

<style>
	.navbar {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 115rpx;
		background: #fff;
		color: #555;
		z-index: 2001;
		border-top: 1rpx solid rgba(0, 0, 0, 0.1);
	}

	.navbar .navbar-icon {
		width: 36rpx;
		height: 36rpx;
	}

	.navbargator {
		height: 100%;
		width: 1%;
	}

	.f-row {
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		-webkit-box-orient: horizontal;
		-webkit-flex-direction: row;
		flex-direction: row;
	}

	.navbar-view {
		width: 100%;
		height: 100%;
	}

	.navbar .navbar-text {
		font-size: 22rpx;
		text-align: center;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
		margin-top: 8rpx;
	}

	.f-c-c {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.f-y-c {
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		-webkit-box-align: center;
		-webkit-align-items: center;
		-ms-flex-align: center;
		-ms-grid-row-align: center;
		align-items: center;
	}

	.f-g-1 {
		min-width: 0;
		flex-grow: 1;
		flex-shrink: 1;
	}
</style>